<template>
	<view>
		<scroll-view @scrolltolower="handlerScrolltolower" scroll-y="true"
			class="list">
			<!-- 此处加列表内容 -->
			<view class="item" v-for="(item, index) in list" :key="index">{{ item }}</view>
			<view class="item-text" v-if="noMore">没有数据了...</view>
			<view class="item-text" v-if="hasLoading">加载中...</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [], // 数据列表
				scrollTop: 0, // 滚动位置
				page: 1, // 当前页数
				pageSize: 15, // 每页数据量
				noMore: false, // 是否有更多数据
				hasLoading: false, // 加载中
			};
		},
		methods: {
			// 初始化数据
			initData() {
				console.log('-----', 1)
				this.hasLoading = true;
				// 定时是为了模拟数据请求慢，延迟等问题。
				setTimeout(() => {
					this.getList()
				}, 1000); // 3000毫秒后执行*  
			},

			getList() {
				uni.request({
					url: 'api/test',
					success: res => {
						let newList = [];
						//  this.list.length <=50 是为了模拟数据加载完毕的情况，因为使用的是Mock模拟数据。会一直产生数据
						if (res.data.list.length != 0 && this.list.length <=50) {
							newList = res.data.list;
						} else {
							this.noMore = true;
						}

						// 将前后的数据拼接在一起
						this.list = this.list.concat(newList);
						this.page++

						console.log(res);
						this.hasLoading = false;
					}
				});
			},
			handlerScrolltolower(e) {
				console.log('--handlerScrolltolower----2------', e)
				this.loadMore();
			},
			// 加载更多数据
			loadMore() {
				// if (!this.noMore) return;
				// this.page++;
				this.initData()
	
				// 模拟无限滚动条件，当加载到一定数量后停止加载
				if (this.list.length >= 100) {
					this.noMore = true;
				}
			}
		},
		onLoad() {
			this.initData();
		}
	}
</script>

<style lang="less">
	.container {
		height: 100vh;
	}

	.list {
		height: 100vh;
		// height: calc(100vh - 490rpx);
	}

	.item {
		height: 50px;
		line-height: 50px;
		border-bottom: 1px solid #ccc;
		text-align: center;
	}

	.item-text {
		height: 50px;
		text-align: center;
	}
</style>